<template>
	<view class="userinfo">
		<view class="info_nickname">
			<view class="nickname_left"> id: </view>
			<view class="nickname_right">
				<input v-model="id" :placeholder="userinfo.id" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 账号: </view>
			<view class="nickname_right">
				<input v-model="userAccount" :placeholder="userinfo.user_account" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 用户角色: </view>
			<view class="nickname_right">
				<input v-model="userRole" :placeholder="userinfo.userRole" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 昵称: </view>
			<view class="nickname_right">
				<input v-model="nickname" :placeholder="userinfo.nickname" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">姓名:</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.name" v-model="name" maxlength="10" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 性别: </view>
			<view class="nickname_right gender">
				<picker @change="examinationType" :range="examinationTypeArray" style="margin-right: 10rpx">
					<label class="">{{ examinationTypeArray[examinationTypeIndex] }}</label>
				</picker>
				<uni-icons class="arrow-right" type="right" size="20" style="margin-top: 5rpx"></uni-icons>
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">电话:</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.phone" v-model="phone" maxlength="11" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">邮箱:</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.email" v-model="email" maxlength="30" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">学号:</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.stu_num" v-model="stuNum" maxlength="20" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">状态(无法修改):</view>
			<view class="nickname_right">
				<input disabled="true" class="uni-input" :placeholder="userinfo.is_deleted == 0?'未删除':'已删除'" maxlength="20" />
			</view>
		</view>
		<view class="other">
			<view class="other_addres" @click="openAddressPicker">
				<view>地址:</view>
				<view>{{userinfo.address}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="btn-wrap">
			<button type="warn" class="btn" @click="saveinfo">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				userAccount:'',
				userRole:'',
				imgUrl:'',
				userId:'',
				email: '',
				stuNum: '',
				avatar: '',
				nickname: '',
				username: '',
				avatar: '',
				name: '',
				examinationTypeArray: ['男', '女'],
				examinationTypeIndex: 0,
				examinationTypeArrayType: '',
				phone: '',
				number: 2,
				flag: false,
				userinfo: [],
			}
		},
		onLoad(query) {
			this.userId = query.userId;
			this.getUserinfo();
		},
		methods: {
			openAddressPicker() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.name;
						that.userinfo.address = res.name;
						uni.setStorageSync("address", res.name)
					}
				});
			},
			saveinfo: function() {
				let that = this;
				let data = {
					userAccount: that.userAccount,
					userRole: that.userRole,
					userId: that.userId,
					nickname: that.nickname,
					name: that.name,
					gender: that.examinationTypeArray[that.examinationTypeIndex],
					phone: that.phone,
					email: that.email,
					stuNum: that.stuNum,
					address: that.address
				}
				that.$ajax(that.$url.updateUser, "POST", data, function(resp) {
					uni.showToast({
						icon: "none",
						title: "保存成功！"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
			getUserinfo() {
				let that = this;
				this.url = uni.getStorageSync('url');
				let collect = uni.getStorageSync('collect');
				this.collectNum = collect.length;
				this.$ajax(this.$url.getUser + "?userId=" + that.userId, 'GET', null, function(resp) {
					that.userinfo = resp.data.result
					if (that.userinfo.gender == '男') {
						that.examinationTypeIndex = 0
					} else {
						that.examinationTypeIndex = 1
					}
				})
			},
			// 绑定输入监听事件
			onName(event) {
				const {
					detail
				} = event
				this.username = detail.value
			},
			change(e) {
				console.log('e:', e)
			},
			examinationType(e) {
				this.examinationTypeIndex = e.target.value
				this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
			},
			changenumber() {
				this.number = 1
				this.flag = true
			},
			onPhone(event) {
				const {
					detail
				} = event
				this.phone = detail.value
			}
		}
	}
</script>

<style lang="scss">
	.other {
		margin: 10rpx;
		height: 190rpx;
		// width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}

	button::after {
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	.userinfo {
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		height: 100%;
		position: relative;

		.form {
			background-color: #ffffff;
		}

		.avatar-wrap {
			border: 0;
			background-color: #ffffff;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;

			.avatar {
				margin-right: 10rpx;
			}

			.ipt {
				display: flex;
				align-items: center;
			}

			img {
				width: 118rpx;
				height: 118rpx;
			}
		}

		.info_nickname {
			border-bottom: 1px solid #e9e9e9;
			height: 112rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			// justify-content: space-between;

			.nickname_left {}

			.nickname_right {
				input {
					text-align: right;
				}
			}

			.gender {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.btn-wrap {
			position: absolute;
			// bottom: 50rpx;
			width: 100%;
			text-align: center;

			.btn {
				width: 690rpx;
				height: 88rpx;
			}
		}
	}
</style>